<h2> Data Master</h2>
 <table id="grid">
        <thead>
          <tr>
            <th data-field="No"><div align="center">No.</div></th> 
            <th data-field="Form"><div align="center">Form</div></th>
            <th data-field="Type"><div align="center">Type</div></th>
            <th data-field="Gram"><div align="center">Gram</div></th>
            <th data-field="Grade"><div align="center">Grade</div></th>
            <th data-field="Lot No"><div align="center">Lot No</div></th>
            <th data-field="User Name"><div align="center">User Name</div></th>
            <th data-field="Start Date"><div align="center">Start Date</div></th>
            <th data-field="End Date"><div align="center">End Date</div></th>
	  		<th data-field="Status"><div align="center">Status</div></th>
            <th data-field="Control"><div align="center">Control</div></th>
          </tr>
        </thead>
        <tbody>
        <?php foreach ($rs as $r) 
		{
          echo "<tr>";
          echo "<td>"."<div align='center'>".$r['order_id']."</div>"."</td>";
          echo "<td>".$r['form_name']."</td>";
          echo "<td>".$r['type_of']."</td>";
          echo "<td>".$r['gram']."</td>";
          echo  "<td>".$r['grade']."</td>";
          echo  "<td>". $r['lot_no']. "</td>";
          echo  "<td>". $r['user_keyin']. "</td>";
          echo  "<td>". $r['start_date']. "</td>";
          echo  "<td>". $r['end_date']. "</td>";
          echo  "<td>";
		   if($r['status']==1)
		   {
			   echo"<font color='green'>"."Active";
		   }
		  echo "</td>";
		  echo  "<td>";
		  //echo 
		  if($r['form_id']==1)
		  {
		echo 
		  "<div align='center'>".anchor("masterreel/information_masterreel/".$r['mt_id'],
		  "<input type='submit' name='Submit' id='Submit' value='แสดง'class='k-button'/>")."</div>";

		  }
		  if($r['form_id']==2)
		  {
		echo 
		  "<div align='center'>".anchor("cutsize/information_cutsize/".$r['mt_id'],
		  "<input type='submit' name='Submit' id='Submit' value='แสดง'class='k-button'/>")."</div>";
		  }
		  if($r['form_id']==3)
		  {
		echo 
		  "<div align='center'>".anchor("foliosheet/information_foliosheet/".$r['mt_id'],
		  "<input type='submit' name='Submit' id='Submit' value='แสดง'class='k-button'/>")."</div>";
		  }
		  if($r['form_id']==4)
		  {
		echo 
		  "<div align='center'>".anchor("finalcheck/information_finalcheck/".$r['mt_id'],
		  "<input type='submit' name='Submit' id='Submit' value='แสดง'class='k-button'/>")."</div>";
		  }
		  if($r['form_id']==5)
		  {
		echo 
		  "<div align='center'>".anchor("pulpstrength/information_pulpstrength/".$r['mt_id'],
		  "<input type='submit' name='Submit' id='Submit' value='แสดง'class='k-button'/>")."</div>";
		  }
		  if($r['form_id']==6)
		  {
		echo 
		  "<div align='center'>".anchor("incoming/information_incoming/".$r['mt_id'],
		  "<input type='submit' name='Submit' id='Submit' value='แสดง'class='k-button'/>")."</div>";
		  }
		  if($r['form_id']==7)
		  {
		echo 
		  "<div align='center'>".anchor("starch/information_starch/".$r['mt_id'],
		  "<input type='submit' name='Submit' id='Submit' value='แสดง'class='k-button'/>")."</div>";
		  }
		  echo  "</td>";
          echo  "</tr>";
		}
          ?>
        </tbody>
      </table>
    <script>



		function createChart2() {
			    $("#chart2").kendoChart({
			        theme: $(document).data("kendoSkin") || "default",
			        title: {
			            text: "Work of month"
			        },
			        legend: {
			            position: "bottom"
			        },
			        seriesDefaults: {
			            type: "bar",
			            stack: true
			        },
			        series: [{
			            name: "Open Jobs",
			            data: [67.96, 128.93, 75, 74, 78]
			        }, {
			            name: "Completed",
			            data: [15.7, 16.7, 20, 23.5, 26.6]
			        }],
			        valueAxis: {
			            labels: {
			                format: "{0}  "
			            }
			        },
			        categoryAxis: {
			            categories: ["Jan", "Feb", "Mar", "Apr", "May"]
			        },
			        tooltip: {
			            visible: true,
			            format: "{0}  "
			        }
			    });
			}

			
			function createChart() {
			    $("#chart").kendoChart({
			        theme: $(document).data("kendoSkin") || "default",
			        title: {
			            text: "ระบบงาน QI ในระบบทั้งหมด"
			        },
			        legend: {
			            position: "right",
			            labels: {
			                template: "#= text # (#= value #%)"
			            }
			        },
			        seriesDefaults: {
			            labels: {
			                visible: true,
			                format: "{0}%"
			            }
			        },
			        series: [{
			            type: "pie",
			            data: [ {
			                category: "Open Jobs",
			                value: 22
			            }, {
			                category: "Waitting for Head Engineering",
			                value: 2
			            }, {
			                category: "Waiting for Department Manager",
			                value: 49
			            }, {
			                category: "Pending",
			                value: 27
			            } ]
			        }],
			        tooltip: {
			            visible: true,
			            format: "{0}%"
			        }
			    });
			}



                $(document).ready(function() {

 			setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createChart();

                        $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
                        });
                    }, 400);

		  
                    setTimeout(function() {
                    	createChart();
                        createChart2();

                        $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
                            createChart2();
                            
                        });
                    }, 500);

                  	 

                    $("#grid").kendoGrid({
						columns: [
						{ field: "No", width: "10px" },
						{ field: "Form", width: "80px" },
						{ field: "Type", width: "50px" },
						{ field: "Gram", width: "50px" },
						{ field: "Grade", width: "10px" },
						{ field: "Lot No", width: "10px" },
						{ field: "User Name", width: "50px" },
						{ field: "Start Date", width: "50px" },
						{ field: "End Date", width: "50px" },
						{ field: "Status", width: "30px" },
						{ field: "Control",  width: "30px" }
						],
			            //height: 500,
						filterable: true,  
                        scrollable: false,
						pageable: true,
						dataSource: {
						pageSize: 10
						} 
                    });
                });
            </script> 
